<template>
  <div>
    <a-card title="提成规则">
      <div style="margin-bottom:12px;">
        <a-button type="primary" @click="openAdd">新增规则</a-button>
      </div>
      <a-table :dataSource="list" :loading="loading" :pagination="pagination" rowKey="id" bordered>
        <a-table-column title="规则编码" dataIndex="ruleCode" />
        <a-table-column title="名称" dataIndex="name" />
        <a-table-column title="流程" dataIndex="workflowStepCode" />
        <a-table-column title="任务" dataIndex="taskCode" />
        <a-table-column title="口径" dataIndex="basisType" />
        <a-table-column title="基数" dataIndex="amountBase" />
        <a-table-column title="单位值" dataIndex="unitValue" />
        <a-table-column title="周期" dataIndex="period" />
        <a-table-column title="启用" dataIndex="isActive" />
      </a-table>
    </a-card>

    <a-modal v-model:visible="visible" title="新增规则" @ok="save">
      <a-form :model="form" labelCol="{ span:6 }" wrapperCol="{ span:16 }">
        <a-form-item label="规则编码"><a-input v-model:value="form.ruleCode"/></a-form-item>
        <a-form-item label="名称"><a-input v-model:value="form.name"/></a-form-item>
        <a-form-item label="流程"><a-input v-model:value="form.workflowStepCode" placeholder="ORDER_CREATED"/></a-form-item>
        <a-form-item label="任务"><a-input v-model:value="form.taskCode" placeholder="CREATE_ORDER"/></a-form-item>
        <a-form-item label="口径"><a-select v-model:value="form.basisType" :options="basisOpts"/></a-form-item>
        <a-form-item label="基数"><a-input v-model:value="form.amountBase" placeholder="ORDER_AMOUNT"/></a-form-item>
        <a-form-item label="单位值"><a-input-number v-model:value="form.unitValue" :precision="4" style="width:100%"/></a-form-item>
        <a-form-item label="周期"><a-select v-model:value="form.period" :options="periodOpts"/></a-form-item>
        <a-form-item label="启用"><a-switch v-model:checked="form.isActiveBool"/></a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
import { getAppEnvConfig } from '/@/utils/env';
import { useUserStore } from '/@/store/modules/user';

const { VITE_GLOB_API_URL } = getAppEnvConfig();
const userStore = useUserStore();
const list = ref([]);
const loading = ref(false);
const pagination = reactive({ current: 1, pageSize: 10, total: 0, onChange: (p,s)=>{pagination.current=p; pagination.pageSize=s; fetchData();}});

const visible = ref(false);
const form = reactive({ ruleCode:'', name:'', workflowStepCode:'', taskCode:'', basisType:'PCT_OF_AMOUNT', amountBase:'ORDER_AMOUNT', unitValue:0, period:'PER_EVENT', isActiveBool:true });
const basisOpts = [
  { value:'FIXED', label:'固定额' },
  { value:'PER_COUNT', label:'按数量' },
  { value:'PCT_OF_AMOUNT', label:'按金额百分比' },
];
const periodOpts = [
  { value:'PER_EVENT', label:'单次' },
  { value:'PER_MONTH', label:'按月' },
];

function openAdd(){ visible.value = true; }

async function fetchData(){
  loading.value = true;
  try{
    const res = await axios.get(`${VITE_GLOB_API_URL}/hr/commission/rule/list`, { params: { pageNo: pagination.current, pageSize: pagination.pageSize }, headers: { 'X-Access-Token': userStore.getToken }});
    if(res.data?.success){ list.value = res.data.result.records || []; pagination.total = res.data.result.total || 0; }
  } finally { loading.value = false; }
}

async function save(){
  const payload = { ...form, isActive: form.isActiveBool ? 1 : 0 };
  await axios.post(`${VITE_GLOB_API_URL}/hr/commission/rule/add`, payload, { headers: { 'X-Access-Token': userStore.getToken }});
  visible.value = false; fetchData();
}

fetchData();
</script>

<style scoped>
</style>


